<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06_元素删除和插入操作</title>
		<!-- 元素删除和插入操作：针对元素 增删改
		.append()  功能：在匹配元素集合中所有元素的内容末尾插入内容
		.prepend   功能：在匹配元素集合中所有元素的内容开头插入内容
		
		.after()   功能：在匹配元素集合中所有元素的外部后面插入内容
		.before()  功能：在匹配元素集合中所有元素的外部前面插入内容
		
		.remove()  功能：使用前提元素内容  删除元素
		.empty()   功能：使用前提元素内容  清空元素
		
		.replaceWith()  
		 -->
		<style>
			/* css  button添加样式：外边距5px  内边距8px 15px 鼠标变手指
			        body添加样式：外边距20px
			 		target添加样式：边框1px  基础倒角  内边距10px  上外边距10px 
			*/
			button{
				padding: 10px 15px;
				margin:5px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid red;
				border-radius: 5px;
				margin-top: 10px;
				padding: 10px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 7个按钮  div套p  div套p -->
		
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!-- 1.目标显示区域 -->
		<div id="target">
			<p>目标元素的默认段落</p>
		</div>
		<!-- 2.替换和插入的元素块区域  隐藏-->
		<div id="newElement" style="display: none;" >
			<p>插入或替换的元素块段落</p>
		</div>
		<script>
			// 1.点击内部末尾插入按钮 实现选框内末尾插入新元素
			$("#appendBtn").click(function(){
				//插入新增元素--1.1创建新元素--复制新元素 clone()
				//根据抓到元素--复制出新元素--包含原有属性和样式
				var nw=$("#newElement").clone();
				//复制div加p空间元素，含原有属性--显示display:blok;
				nw.css("display","block");
				//1.3复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").append(nw);
			});
			// 2.点击内部末尾插入按钮 实现选框内开头插入新元素
			$("#prependBtn").click(function(){
				var na=$("#newElement").clone();
				na.css("display","block");
				$("#target").prepend(na);
			});
			// 3.点击外部后面插入按钮 实现选框内开头插入新元素
			$("#afterBtn").click(function(){
				var na1=$("#newElement").clone();
				na1.css("display","block");
				$("#target").after(na1);
			});
			// 4.点击外部前面插入按钮 实现选框内开头插入新元素
			$("#beforeBtn").click(function(){
				var na2=$("#newElement").clone();
				na2.css({"display":"block",
				         "width":"500px",
						 "height":"500px",
						 "background":"#aaffff",
						 "color":"transparent",
						 "border-radius":"50%",
						 "backgroung-image":"url(../img/蜡笔小新 (192)_爱给网_aigei_com.png)",
						 "background-size":"100%"
				});
				$("#target").before(na2);
			});
		    //5  6点击删除和清空元素按钮  实现真实的删除元素和清空元素
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			//7.点击替换元素按钮  将当前效果替换为新效果
			$("#replaceWithBtn").click(function(){
				//克隆  新元素效果
				var c=$("#newElement").clone().css("display","block");
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>